<template>
  <div>
    <p>click {{count}} times, count is {{evenOrOdd}}</p>

    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>

<script>
  // import {mapState, mapGetters, mapActions} from 'vuex'

  export default {

    mounted () {
      // console.log(this.$store)
    },
    data () {
      return {
        count: 0,
        evenOrOdd: ''
      }
    },
    computed: {
      evenOrOdd () {
        return this.count%2===0?'偶数':'奇数'
      }
    },
    // computed: {
    //   ...mapState(['count']),
    //   ...mapGetters(['evenOrOdd'])
    // },

    methods: {
      increment () {
        const count = this.count
        this.count = count + 1
      },
      decrement () {
        this.count = this.count - 1
      },
      incrementIfOdd () {
        if(this.count%2===0){
          this.count = this.count + 1
        }
      },
      incrementAsync () {
       setTimeout(() => {
         const count = this.count
         this.count = count + 1
       }, 1000)
      }
    }
    // methods: {
    //   ...mapActions(['increment', 'decrement', 'incrementIfOdd', 'incrementAsync'])
    // }
  }
</script>

<style>

</style>
